import React, { Component } from 'react';
import Header from '../../components/Header';
import { reqGetcoupon } from '../../http/api';
import './Coupon.less';
import {CapsuleTabs} from 'antd-mobile';

class Coupon extends Component {
    constructor(){
        super();
        this.state = {
          user: JSON.parse(localStorage.getItem('userInfo')),
          myBannerArr:[]
        }
      }
      componentDidMount(){
        reqGetcoupon().then(res=>{
          if(res.data.code===200){
            this.setState({
              myBannerArr:res.data.list
            })
          }
        }).catch(err=>{
            console.log(err);
        })
      }
      getDate(btime,etime){
        {
            let begintime = new Date(btime).toLocaleDateString;
            let endtime = new Date(etime).toLocaleDateString;
            
            return `${begintime}至${endtime}`
        }
      }
      getTitle(index){
        let title;
        switch(index){
            case 1:
                title='未使用';
                break;
            case 2:
                title='已使用';
                break;
            default:
                title='已过期';
                break
        }
        return title
      } 
    render() {
        let { myBannerArr } = this.state;
        return (
            <div className='Coupon'>
                <Header title={'优惠券'} back></Header>
                <CapsuleTabs defaultActiveKey={0}>
                    {myBannerArr?myBannerArr.map((item,index)=>{
                        return <CapsuleTabs.Tab title={this.getTitle(index)} key={index}>
                        <ul>
                        {
                                item.content.map(item=>{
                                    return <li key={item.id}>
                                        <div className="head">
                                            <div className="right">
                                                <span>￥{item.money}</span>
                                                <span>满{item.limit_money}元可用</span>
                                            </div>
                                            <div className="left">
                                                <div className="title">{item.title}</div>
                                                <div className="date">{this.getDate(item.begintime,item.endtime)}</div>
                                            </div>
                                        </div>
                                        <div className="footer">
                                            <div className="desc">{item.description}</div>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                      </CapsuleTabs.Tab>
                    }):[]}
                </CapsuleTabs>
            </div>
        );
    }
}

export default Coupon;
